<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>图片数字华容道</title>
    <script src="js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        }

        /* 容器用于垂直排列元素 */
        .game-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 50px;
        }

        ul {
            width: 600px;
            height: 600px;
            display: flex;
            flex-wrap: wrap;
        }

        li {
            width: 200px;
            height: 200px;
            background-size: 600px;
            border: 1px solid #fff;
            cursor: pointer;
        }

        button {
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 16px;
        }

        #timer {
            font-size: 24px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <!-- 使用容器包裹元素 -->
        <div class="game-container">
            <div id="timer">{{ formattedTime }}</div>
            <ul>
                <li v-for="(item, index) in puzzlePieces" :key="index"
                    :style="{ 'background-image': item.image? `url('img/bg.png')` : 'none', 'background-position': item.position }"
                    @click="movePiece(index)"></li>
            </ul>
            <button @click="startGame">开始游戏</button>
        </div>
    </div>
    <script>
        Vue.createApp({
            data() {
                return {
                    puzzlePieces: [
                        { image: true, position: '0 0' },
                        { image: true, position: '-200px 0' },
                        { image: true, position: '-400px 0' },
                        { image: true, position: '0 -200px' },
                        { image: true, position: '-200px -200px' },
                        { image: true, position: '-400px -200px' },
                        { image: true, position: '0 -400px' },
                        { image: true, position: '-200px -400px' },
                        { image: false, position: '' }
                    ],
                    emptyIndex: 8, // 空白块的初始索引
                    timer: null, // 计时器
                    elapsedTime: 0, // 已用时间（秒）
                    isGameStarted: false, // 游戏是否开始
                    maxTime: 300 // 最大游戏时间（秒）
                };
            },
            computed: {
                formattedTime() {
                    const minutes = Math.floor(this.elapsedTime / 60);
                    const seconds = this.elapsedTime % 60;
                    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                }
            },
            methods: {
                // 开始游戏
                startGame() {
                    if (this.isGameStarted) return;
                    this.shufflePieces();
                    this.elapsedTime = 0;
                    this.timer = setInterval(() => {
                        this.elapsedTime++;
                        if (this.elapsedTime >= this.maxTime) {
                            clearInterval(this.timer);
                            alert('游戏失败，时间已到！');
                            this.resetGame();
                        }
                    }, 1000);
                    this.isGameStarted = true;
                },
                // 打乱拼图块
                shufflePieces() {
                    let newPieces = this.puzzlePieces.slice();
                    for (let i = newPieces.length - 1; i > 0; i--) {
                        const j = Math.floor(Math.random() * (i + 1));
                        [newPieces[i], newPieces[j]] = [newPieces[j], newPieces[i]];
                    }
                    this.puzzlePieces = newPieces;
                    this.emptyIndex = this.puzzlePieces.findIndex(piece =>!piece.image);
                },
                // 移动拼图块
                movePiece(index) {
                    if (!this.isGameStarted) return;
                    const adjacentIndices = [this.emptyIndex - 1, this.emptyIndex + 1, this.emptyIndex - 3,
                        this.emptyIndex + 3
                    ];
                    if (adjacentIndices.includes(index)) {
                        [this.puzzlePieces[this.emptyIndex], this.puzzlePieces[index]] = [this.puzzlePieces[index],
                            this.puzzlePieces[this.emptyIndex]
                        ];
                        this.emptyIndex = index;
                        this.checkWin();
                    }
                },
                // 检查是否完成游戏
                checkWin() {
                    const correctOrder = [
                        { image: true, position: '0 0' },
                        { image: true, position: '-200px 0' },
                        { image: true, position: '-400px 0' },
                        { image: true, position: '0 -200px' },
                        { image: true, position: '-200px -200px' },
                        { image: true, position: '-400px -200px' },
                        { image: true, position: '0 -400px' },
                        { image: true, position: '-200px -400px' },
                        { image: false, position: '' }
                    ];
                    if (JSON.stringify(this.puzzlePieces) === JSON.stringify(correctOrder)) {
                        clearInterval(this.timer);
                        alert(`恭喜，你完成了游戏！用时：${this.formattedTime}`);
                        this.resetGame();
                    }
                },
                // 重置游戏
                resetGame() {
                    clearInterval(this.timer);
                    this.puzzlePieces = [
                        { image: true, position: '0 0' },
                        { image: true, position: '-200px 0' },
                        { image: true, position: '-400px 0' },
                        { image: true, position: '0 -200px' },
                        { image: true, position: '-200px -200px' },
                        { image: true, position: '-400px -200px' },
                        { image: true, position: '0 -400px' },
                        { image: true, position: '-200px -400px' },
                        { image: false, position: '' }
                    ];
                    this.emptyIndex = 8;
                    this.elapsedTime = 0;
                    this.isGameStarted = false;
                }
            }
        }).mount('#app');
    </script>
</body>

</html>